<template>
	<view class="kq_kuang">
		
		<view class="top_box">
			
			<view class="kaoqin_top">
				<image src="../../../static/user.png" mode="" @click="goGeren"></image>
			</view>
			<view class="kaoqin_top_center">
				<text class="text_top">周小明</text>
				<text class="text_bottom" >销售经理</text>
			</view>
			<view class="kaoqin_top_right">
				<text>2019-08</text>
			<image src="../../../static/dayu.png" mode=""></image>
			</view>
		</view>
		
		
		
		<view class="kaoqin_finish">
			<text>月度考勤汇总</text>
			<text @click="jumpDakaYueli">打卡月历</text>
		</view>
		
		<ul class="ulist">
			<li>
				<text>出勤天数</text>
				<view>
					<text>21天</text>
					<image src="../../../static/dayu.png" mode=""   class="jiantou" ></image>
				</view>
			</li>
			<li>
				<text>平均工时</text>
				<view>
					<text>8小时</text>
					<image src="../../../static/dayu.png" mode=""    class="jiantou" ></image>
				</view>
			</li>
			<li>
				<text>正常天数</text>
				<view>
					<text>20天</text>
					<image src="../../../static/dayu.png" mode=""  class="jiantou"></image>
				</view>
			</li>
			<li>
				<text>休息天数</text>
				<view>
					<text>9天</text>
					<image src="../../../static/dayu.png" mode=""  class="jiantou"></image>
				</view>
			</li>
		</ul>
		
		
		<!-- 折叠面板 -->
		
		  <view class="u-page__item">
		        <u-collapse
		                accordion
		        >
		            <u-collapse-item
		                    title="迟到"
		            >
		                <!-- <text class="u-collapse-content"> -->
							<ul class="week">
								<li>
									<text>2019-08-19 星期一</text>
									<text>1小时</text>
								</li>
								<li>
									<text>2019-08-20 星期二</text>
									<text>1小时</text>
								</li>
								<li>
									<text>2019-08-21 星期三</text>
									<text>1小时</text>
								</li>
							</ul>
						<!-- </text> -->
		            </u-collapse-item>
		            <u-collapse-item
		                    title="早退"
		            >
		                <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
		            </u-collapse-item>
		            <u-collapse-item
		                    title="缺卡"
		            >
		                <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
		            </u-collapse-item>
					<u-collapse-item
					        title="出差"
					>
					    <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
					</u-collapse-item>
					<u-collapse-item
					        title="请假"
					>
					    <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
					</u-collapse-item>
		        </u-collapse>
		    </view>
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{
					name:'马云',
					sex:"男",
					birthday:"1984-06-22",
					email:"Windir@AxureUX.com",
					phone:'1234353553',
					wxhao:'18033441894',
					linePhone:"12222222",
					workNumber:'10001',
					Origin:'河南',
					schoolEnd:"北大",
					endTime:'2019-09',
					Degree:'博士',
					grade:'心理学',
					deparent:'销售部',
					zhiwei:'销售经理'
				}
			}
		},
		methods: {
			jumpDakaYueli(){
				uni.navigateTo({
					url:"/pages/my/kaoqinyueli/kaoqinyueli"
				})
			},
			goGeren(){
				uni.navigateTo({
					url:"/pages/my/geren/geren?data="+JSON.stringify(this.data)
				})
			}
		}
	}
</script>

<style  lang="scss">
	.ulist>li>text:nth-child(1){
		margin-left: 15px;
	}
	.week>li{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		margin-top: 2px;
		background-color: white;
	}
	.u-page__item{
		margin-top: 20px;
	}
	.ulist>li>text{
		font-size:14px;
		color: #666666;
	}
	.jiantou{
		width: 15px;
		height: 15px;
	}
	.ulist>li{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height:50px;
		margin-top: 2px;
		background-color: white;
	}
	.kaoqin_finish>text:nth-child(1){
		font-size: 12px;
		color: #666666;
	}
	.kaoqin_finish>text:nth-child(2){
		font-size: 12px;
		color: #0079fe;
	}
	.kaoqin_finish{
		display: flex;
		justify-content: space-around;
		height: 50px;
		line-height: 50px;
		margin-top: 2px;
		border-top: 1px solid rgb(242, 242, 242);
		border-bottom: 1px solid rgb(242, 242, 242);
	}
	.kaoqin_top_right>image{
		width: 20px;
		height: 20px;
	}
	.kq_kuang{
		width: 100%;
		height: 100vh;
		background-color: rgba(249, 249, 249, 1);
	}
	.text_top{
		font-size: 18px;
		color: #666666;
	}
	.text_bottom{
		color: #999999;
	}
	.kaoqin_top_right{
		display: flex;
	}
	*{
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	.top_box{
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.kaoqin_top>image{
		width: 45px;
		height: 45px;
	}
	.kaoqin_top_center{
		display: flex;
		flex-direction: column;
	}
	 .u-page {
	        padding: 0;
			
	        &__item {
	    
	            &__title {
	                 color: $u-tips-color;
	                 background-color: $u-bg-color;
	                 padding: 15px;
	                 font-size: 15px;
	        
	                &__slot-title {
	                     color: $u-primary;
	                     font-size: 14px;
	                 }
	            }
	        }
	    }
	
	    .u-collapse-content {
	        color: $u-tips-color;
	        font-size: 14px;
	    }
</style>
